<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="../js/vue.js"></script>
<body>
    <div id="app">
        <!-- 
        - 内容渲染指令（v-html、v-text）
        - 条件渲染指令（v-show、v-if、v-else、v-else-if）
        - 事件绑定指令（v-on）
        - 属性绑定指令 （v-bind）
        - 双向绑定指令（v-model）
        - 列表渲染指令（v-for）
     -->
        <h2>个人信息</h2>
        <!-- 既然指令是vue提供的特殊的html属性，所以咱们写的时候就当成属性来用即可 -->
         <!--
            内容渲染指令用来辅助开发者渲染 DOM 元素的文本内容
            v-text：类似 innerText，使用该语法，会覆盖 p 标签原有内容
            v-html：类似 innerHTML，使用该语法，会覆盖 p 标签原有内容；类似 innerHTML，使用该语法，能够将HTML标签的样式呈现出来。
         -->
        <p v-text="uname">姓名：</p>
        <p v-html="intro">简介：</p>
        <!-- 
            条件判断指令，用来辅助开发者按需控制 DOM 的显示与隐藏
            v-show：控制元素显示隐藏；v-show = "表达式"   表达式值为 true 显示， false 隐藏
            v-if：控制元素显示隐藏（条件渲染）；v-if= "表达式"          表达式值 true显示， false 隐藏
        -->
            <div id="app2">
                <div class="box">我是v-show控制的盒子</div>
                <div class="vox">我是v-if控制的盒子</div>
            </div>
   </div>
</body>
<script>
    const vm = new Vue({
        el:'#app',
        data:{
            uname:'<h2>张三</h2>',
            intro:'<h2>这是一个<strong>非常优秀</strong>的boy</h2>'
        }
    })
</script>
</html>